<template>
  <div align="center">
    <el-popover placement="right" width="400" trigger="click">
      <el-button slot="reference" @click="toComplain">我要曝光</el-button>
    </el-popover>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="曝光描述" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.active }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="曝光地址" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.address }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="曝光图片" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div slot="reference" class="name-wrapper">
               <img :src="scope.row.photo" class="avatar" />
            </div>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import axios from "axios";
import commons from "../../../assets/commons";

export default {
  data() {
    return {
      //分页
      currentPage: 1, //当前页
      page: 1,
      total: 0, //总条数
      totalPage: 0, //总页数
      size: 8, //每页大小

      tableData: [],
    };
  },
  methods: {

    toComplain(){
      this.$router.replace("../per_center/complaint")
    },

    getExposureInfo() {
      axios
        .get(
          commons.baseUrl +
            "/user/pet/findAllPunishment?page=" +
            this.page +
            "&size=" +
            this.size
        )
        .then((res) => {
          console.log(res);
          this.tableData = res.data.datas;
        });
    },
  },
  mounted() {
    this.getExposureInfo();
  },
  computed: {},
};
</script>
<style scoped>
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>
